<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="../../vue.js"></script>
</head>

<body>

      <div id="app">



            <input type="" :value="message" @input='changeValue' />
            <br>
            <input v-model="mess" />

            <br>{{message}}

            <br>{{mess}}

            <br>{{mess}}

            <input type="checkbox" name="男" id="a" v-model="testChecked">

            <br>{{testChecked}}
            <br>


            <div id="example-4">
                  <input type="radio" id="one" value="One" name="1" v-model="picked">
                  <label for="one">One</label>
                  <br>
                  <input type="radio" id="two" value="Two" name="1" v-model="picked">
                  <label for="two">Two</label>
                  <br>
                  <span>Picked: {{ picked }}</span>
            </div>


      </div>


      <script>
            new Vue({

                  el: '#app',

                  data: {

                        message: 'aaaaaaaaaaaa',
                        mess: 'bbbbb',

                        testChecked: true,
                        picked: 'One'
                  },

                  methods: {

                        changeValue(ev) {

                              this.message = ev.target.value;
                        }

                  }
            });
      </script>


</body>

</html>